<script>
import {apiCreateOrder, apiGetUserById, apiProductImages} from "@/api/api";
import {addToCart} from "@/utils/Cart";

export default {
  data(){
    return{
      imageList : []
    }
  },
  created() {
      this.loadImages();
  },
  name: "ProductDetail",
  props: {
    currentDetail: {
      type: Object,
      default: () => ({})
    },
    userDetail: {
      type:Object,
      default: () => ({})
    }
  },
  methods:{
    buyNow(){
      const token = localStorage.getItem("token");
      if(!token){
        this.$message.warning("请先登录");
        this.$router.push("/login");
      }else{
        const orderData = {
          address: "默认地址",
          productId: this.currentDetail.id,
          contactPhone: "默认电话",
          contactName: "默认联系人"
        }
        apiCreateOrder(orderData).then(res=>{
          if(res.code===200){
            this.$message.success("订单已创建");
          }else{
            this.$message.error(`错误： ${res.message}`);
          }
        })
      }
    },
    addCart(){
      const token = localStorage.getItem("token");
      if(!token){
        this.$message.warning("请先登录");
        this.$router.push("/login");
      }else{
        // TODO: 数据库查询不能是自己
        addToCart(this.currentDetail)
        this.$message.success("已加入购物车");
        this.$bus.$emit("cart-change");
      }
    },
    onPublisher(){
      if (this.$route.path.toString().startsWith("/userinfo")){
        return
      }
      this.$router.push({
        name: 'userinfo', // 路由名称
        params: { userId: this.userDetail.id } // 传递参数
      })
    },
    loadImages(){
      apiProductImages({productId: this.currentDetail.id}).then(res=>{
        if(res.code===200){
          const list = [];
          res.data.forEach(item=>{
            list.push(item.productImageUrl);
          })
          this.imageList = list;
        }else{
          this.$message.error(`获取图片集失败 ${res.message}`);
          this.imageList = [this.currentDetail.imageUrl];
        }
      })
    },
  }
}
</script>

<template>
  <div v-if="userDetail!==null&&currentDetail!==null" class="product-detail-container">
    <div class="demo-image__preview">
      <el-image
          :style="{height: currentDetail.imageUrl ? '60vh' : '100px', width: 'auto'}"
          :src="currentDetail.imageUrl"
          :preview-src-list="imageList"
          fit="cover">
      </el-image>
    </div>
    <div>

    <div class="info">
      <h2 class="product-name">商品名称: {{ currentDetail?.name }}</h2>
      <p class="product-price">商品价格: ￥{{ currentDetail?.price }}</p>
      <p style="color: #409EFF;margin: 0">商品类别：{{ currentDetail.categoryName }}</p>
      <p style="color: #96761b;margin: 0">发布时间：{{ currentDetail.createTime }}</p>
      <p style="color: #34a634;margin: 0">剩余数量：{{ currentDetail.num }}</p>

      <!-- 其他详情字段 -->
      <div v-if="currentDetail?.description" class="product-description">商品描述：
        {{ currentDetail?.description }}
      </div>
    </div>
    <div style="gap: 2rem;display: flex; align-items: start; justify-content: space-between;flex-wrap: wrap;flex-direction: column">
      <div @click="onPublisher" style="display: flex;align-items: center;margin-top: 0;margin-bottom: -1rem;gap: 1rem">发布者：
          <el-avatar :src="userDetail.avatar">
          </el-avatar>
          <p class="hover-underline"  style="font-size: 1rem; color: black">{{ userDetail.username }}</p>
      </div>
      <div style="display:flex;gap: 1rem;margin-top: 1rem;flex-wrap: wrap">
        <el-button type="primary" @click="buyNow">立即下单</el-button>
        <el-button type="warning" @click="addCart">加入到购物车</el-button>
      </div>
    </div>
    </div>
  </div>
  <el-skeleton v-else :rows="5" animated />
</template>

<style scoped lang="less">
.info{
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.product-detail-container {
  width: 100%;
  padding: 1rem 1rem 0;
  text-align: center;
  display: flex;
  gap: 3rem;
  .demo-image__preview {
    margin-bottom: 16px;
    min-width: 50%;
    .el-image {
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .product-name {
    margin: 16px 0;
    color: #333;
  }

  .product-price {
    font-size: 1rem;
    color: #ff5151;
    font-weight: bold;
    margin: 0;
  }

  .product-description {
    text-align: left;
    color: #666;
    line-height: 1.6;
  }
}
</style>